<template>
	<div>

		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="area" size="small" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="brand" size="small" placeholder="请选择品牌" clearable @change="getCompanyInfo">
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="condition.companyId" size="small" placeholder="请选择公司" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>

			<el-col :span="2">
				<el-button type="primary" size="small" @click="querySwitch">查询</el-button>
			</el-col>
			<!--<el-col :span="7" style="margin-left: -30px;text-align: right;">
				<el-button type="primary" size="small" @click="explainShow =true">报表说明</el-button>
			</el-col>-->
		</el-row>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">开始时间:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="condition.start" size="small" style="width:90%;" type="date" clearable placeholder="请输入开始时间">
				</el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">结束时间:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="condition.stop" size="small" style="width:90%;" type="date" clearable placeholder="请输入结束时间">
				</el-date-picker>
			</el-col>

		</el-row>


		<el-row>

			<el-table :data="tableData.dataList" border  v-loading="loading2" element-loading-text="正在统计数据...">
				<el-table-column label="工单号" width="250px" prop="orderCode">
				</el-table-column>
				<el-table-column :formatter="prevCov" label="结算日期" width="250px">
				</el-table-column>
				<el-table-column label="项目编码" prop="itemCode" width="250px">
				</el-table-column>
				<el-table-column prop="itemName" label="项目名称" width="250px">
				</el-table-column>
				<el-table-column prop="maintainType" label="维修类别" width="250px">
				</el-table-column>
			</el-table>
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
			</el-pagination>
		</el-row>
	</div>
</template>
<script>
	export default {
		data: function() {
			return {
				brand:"",
				area:"",
				//
				brandCombo: [],
				//
				areaCombo: [],
				//
				companyCombo: [],
				//baobiaoshuoming
				explainShow: false,
				//tab页
				activeName: 'first',
				CurentPage: 1,
				CurentPages: 1,
				page: this.page,
				//表格数据
				tableData: {
					total: 0,
					dataList: [],
				},
				//查询条件
				condition: {
					start: '', // 开始时间 ,
					stop: '', //  结束时间 ,
					companyId: '', //  公司ID，
				},
				// 公司ID
				companyId: "",
				// 公司ID和Name
				cidAndcname: [],
				//正在加载
				loading2: false,
				//正在加载
				loading: false,
				// 品牌label 和 value
				oCarBrandList:[],

			}
		},
		methods: {
			querySwitch:function(){
				if(this.$data.activeName=="first"){
					this.query();
				}
				else{
					this.detailQuery();
				}

			},


			query: function() {
				debugger;
				/*if(this.$data.condition.companyId == "") {
					this.$message.error("请选择公司!");
				} else {*/
					this.$data.loading2 = true;
					debugger;
					this.$data.condition.start = this.dateCow(this.$data.condition.start);
					this.$data.condition.stop = this.dateCow(this.$data.condition.stop);
					//this.$data.condition.start = Date.parse(this.$data.condition.start);
					//this.$data.condition.stop = Date.parse(this.$data.condition.stop);
					this.$http.post(this.API_ROOT + '/crm/workitem/workItemQuery', this.$data.condition, {
						params: {
							start: this.$data.CurentPage,
							limit: this.$data.page.pageSize,
						}
					}).then(resp => {
						debugger;
						if(resp.data.success) {
							resp.data.total = parseInt(resp.data.total);
							this.$data.tableData = resp.data;
							this.$data.loading2 = false;
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {});
				//}

			},
			handleSizeChange: function() {

			},
			//列表当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},

			// 品牌转换
			brandConversion:function(cow){
				debugger;
				for(var i=0;i<this.$data.oCarBrandList.length;i++){
					if(cow.brand == this.$data.oCarBrandList[i].value){
						return this.$data.oCarBrandList[i].label;
						break;
					}
				}
			},
			// 品牌转换
			brandConversion2:function(cow){
				debugger;
				for(var i=0;i<this.$data.oCarBrandList.length;i++){
					if(cow.brand == this.$data.oCarBrandList[i].value){
						return this.$data.oCarBrandList[i].label;
						break;
					}
				}
			},
			//riqi zhuanhuan
			bugDateCov: function(row) {
				return this.dateCow(row.buyDate);
			},
			prevCov: function(row) {
				return this.dateCow(row.balanceDate);
			},
			// 日期转换
			dateCow: function(date) {
				if(date == "" || date == null) return "";
				return this.moment(date).format("YYYY-MM-DD");
			},
			// 日期转换
			dateTotimpCow: function(date) {
				if(date == "" || date == null) return "";
				return Date.parse(date)+"";
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					debugger;
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.condition.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
					params: {}
				}).then(resp => {
					this.$data.brandCombo = resp.data.dataList;
				});
			},
			// 获取公司品牌 label 和 value
			getoCarBrand:function(){
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/oCarBrand", {
					params: {}
				}).then(resp => {
					this.$data.oCarBrandList = resp.data.dataList;
				});
			}
		},
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
			this.getoCarBrand();
			this.query();
		}
	}
</script>